<style>
.page{
	background: #fff;
	width: 100%;
	height: 100%;
}
.loan_list{
	min-height: 132rpx;
	width: 90%;
	margin: 0 auto;
	border-bottom: 1rpx solid #e6e6e6;
}
.loan_head,.loan_foot{
	height: 66rpx;
	line-height: 66rpx;
	overflow: hidden;
	position: relative;
}
.loan_head{
	top: 15rpx;
}
.loan_foot{
	height: 54rpx;
	line-height: 56rpx;
}
.loan_left_text{
	font-size: 30rpx;
	float: left;
	font-weight: bold;
}
.loan_right_text{
	font-size: 30rpx;
	float: right;
}
.loan_date{
	font-size: 28rpx;
	color: #989898;
}
.review1{
	color: #51def9;
}
.review2{
	color: #fdad62;
}
.review3{
	color: #71b5f3;
}
.fail_msg{
	font-size: 26rpx;
	color: #f14848;
	margin-bottom: 18rpx;
}
.m-no-data{
	text-align: center;
	color: #989898;
	margin-top: 60rpx;
}
.m-no-data image{
	width: 221rpx;
	height: 227rpx;
}
.no-data-msg{
	position: relative;
	top: 40rpx;
}
</style>
<template>
	<view class="page">
		<view class="loan_content">
			<view class="loan_list" v-for="(item, index) in datalist" :key="index">
				<view class="loan_head">
					<view class="loan_left_text">
						质押金额
					</view>
					<view class="loan_right_text">
						￥{{item.loan_money}}
					</view>
				</view>
				<view class="loan_foot">
					<view class="loan_left_text loan_date" v-if="item.state == 2">
						质押周期：{{item.loan_period}}
					</view>
					<view class="loan_left_text loan_date" v-else>
						申请质押：{{item.apply_time}}
					</view>
					<view class="loan_right_text" :class="'review' + item.state">
						{{item.state_text}}
					</view>
				</view>
				<view class="loan_foot">
					<view class="loan_left_text loan_date">
						质押物件：{{item.type_text}}
					</view>
				</view>
				<view class="fail_msg" v-if="item.state == 3 && item.fail_msg !=''">
					{{item.fail_msg}}
				</view>
			</view>
		</view>
		<view class="m-full-loading" v-if="bIsShowLoading">
			<view class="m-loading">
				<image src="../../static/images/loading.gif" mode="widthFix"></image>
			</view>
		</view>
		<view class="m-no-data" v-if="showNodata">
			<image src="../../static/icons/loan/loan_no_data.png" mode="widthFix"></image>
			<text class="no-data-msg">{{no_data_msg}}</text>
		</view>
	</view>
</template>

<script>
	import henglang from '@/common/common.js';
	export default { 
		data() {
			return {
				datalist: [],	// 列表数据
				page: 1,
				totalPages: 1,
				loadtype: 'normal',	// 加载数据方式
				bIsShowLoading: false,
				showNodata:false,
				search_data:{},
				no_data_msg: ''
			}
		},
		onLoad(){
			this.getList({page: 1});
		},
		methods:{
			// 上拉加载
			onReachBottom(){
				let that = this
				that.loadtype = 'plus';
				that.page++;
				that.search_data.page = that.page;
				if(that.datalist.length === 0) return false
				that.getList(that.search_data);
				that.bIsShowLoading = false
			},
			getList(data){
				let that = this;
				if(that.page <= that.totalPages){
					that.bIsShowLoading = true;
					henglang.post('Loan/loan_list', data, false,function(res){
						that.bIsShowLoading = false;
						let data = res.data;
						let count = data.count;
						if(count == 0){
							that.showNodata = true
							that.datalist = [];
							that.no_data_msg = data.msg;
							return false
						}
						if(that.loadtype == 'plus') {
							that.datalist = that.datalist.concat(data.data);
						}else{
							that.datalist = data.data;
							that.totalPages = data.total_pages;
							uni.stopPullDownRefresh();
						}
					})
				}else{
					return false
				}
			}
		}
	}
</script>